<template>
  <div>
    <h3>核验记录详情</h3>
    <el-card>
      <div>
        <div class="border-bottom pad-bot-12 mar-top-12">
          <div class="title border-line f-size-16">核验结果</div>
          <div class="content">
            <p v-if="!ispass"><i class="el-icon-error error-color"></i> 核验不一致</p>
            <p v-else><i class="el-icon-success success-color"></i> 核验一致</p>
          </div>
        </div>
        <div class="border-bottom pad-bot-12 mar-top-12">
          <div class="title border-line">提交机构信息</div>
          <div class="content">
            <div class="item">
              <p class="title">业务流水号</p>
              <span>{{ verifyInfo.serialID }}</span>
            </div>
            <div class="item">
              <p class="title">提交机构</p>
              <span>{{ verifyInfo.orgName }}</span>
            </div>
            <div class="item">
              <p class="title">操作用户</p>
              <span>{{ verifyInfo.optUser }}</span>
            </div>
            <div class="item">
              <p class="title">核验时间</p>
              <span>{{ verifyInfo.time }}</span>
            </div>
          </div>
        </div>
        <div class="border-bottom pad-bot-12 mar-top-12">
          <div class="title border-line">备案主体基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">备案主体名称(机构提交)</p>
              <span>{{ verifyInfo.bodyName }}<i class="el-icon-success success-color"></i></span>
            </div>
            <div class="item">
              <p class="title">统一社会信用代码(机构提交)</p>
              <span>{{ verifyInfo.companyCode }}<i class="el-icon-success success-color"></i></span>
            </div>
          </div>
          <div class="content" v-if="showFlag">
            <div class="item">
              <p class="title">登记状态(平台)</p>
              <span>存续(在营，开业，在册)</span>
            </div>
            <div class="item">
              <p class="title">备案主体类型(平台)</p>
              <span>-</span>
            </div>
            <div class="item">
              <p class="title">登记机关(平台)</p>
              <span>某某省</span>
            </div>
            <div class="item">
              <p class="title">注册资本(平台)</p>
              <span>1000,00万</span>
            </div>
            <div class="item">
              <p class="title">填报类型(平台)</p>
              <span>合伙企业受益所有人信息备案-自行填报</span>
            </div>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line">受益所有人信息</div>
          <div style="font-size: 14px; padding-bottom: 12px">
            <el-row :gutter="10">
              <el-col :span="5">
                <p>义务机构提交受益所有人数量：<span style="color: #3399cc">1</span>人</p>
              </el-col>
              <el-col :span="16" v-if="!ispass">
                <p style="color: #f56c6c"><i class="el-icon-warning error-color"></i>受益所有人缺失2人：王*，赵*</p>
              </el-col>
            </el-row>
            <el-table
              :data="tableDatas"
              style="width: 100%"
              class="table-box mar-top-12"
              :header-cell-style="{ background: '#fff', color: '#333' }"
              border
            >
              <el-table-column prop="prop" label="" width="50px">
                <template slot-scope="{ row }">
                  <el-button
                    type="text"
                    icon="el-icon-view"
                    :style="{ color: row.view ? '#409EFF' : '#ccc', 'font-size': ' 18px' }"
                    @click="viewText(row, '1')"
                  ></el-button>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120" show-overflow-tooltip>
                <template>
                  {{ ispass ? '张三' : '李四' }}
                </template>
              </el-table-column>
              <el-table-column prop="nationality" label="国籍" width="120" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="idType" label="身份证件或身份证明文件类型" width="240" show-overflow-tooltip> </el-table-column>
              <el-table-column prop="idCode" label="身份证件或身份证明文件号码" width="240" show-overflow-tooltip> </el-table-column>
            </el-table>
            <div v-if="showFlag">
              <p>
                平台当前受益所有人数量：<span style="color: #3399cc">{{ curTableDatas.length }}</span
                >人
              </p>
              <el-table
                :data="curTableDatas"
                style="width: 100%"
                class="table-box1 mar-top-12"
                :header-cell-style="{ background: '#fff', color: '#333' }"
                border
                :row-class-name="tableRowClassName"
              >
                <el-table-column prop="prop" label="" width="50px">
                  <template slot-scope="{ row }">
                    <el-button
                      type="text"
                      icon="el-icon-view"
                      :style="{ color: row.view ? '#409EFF' : '#ccc', 'font-size': ' 18px' }"
                      @click="viewText(row, '2')"
                      :disabled="!checked"
                    ></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="nationality" label="国籍" width="120px"> </el-table-column>
                <el-table-column prop="idType" label="身份证件或身份证明文件类型" min-width="240" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="idCode" label="身份证件或身份证明文件号码" min-width="240" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="type" label="受益所有权关系类型" width="180px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="time" label="更新时间" width="160px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="prop" label="操作" width="120px">
                  <template slot-scope="{ row }">
                    <el-button type="text" icon="el-icon-view" @click="viewItem(row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <p>平台历史受益所有人数量：<span style="color: #3399cc">1</span>人</p>
              <el-table
                :data="historyDatas"
                style="width: 100%"
                class="table-box1 mar-top-12"
                :header-cell-style="{ background: '#fff', color: '#333' }"
                border
              >
                <el-table-column prop="prop" label="" width="50px">
                  <template slot-scope="{ row }">
                    <el-button
                      type="text"
                      icon="el-icon-view"
                      :style="{ color: row.view ? '#409EFF' : '#ccc', 'font-size': ' 18px' }"
                      :disabled="!checked"
                      @click="viewText(row, '3')"
                    ></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="nationality" label="国籍" width="120px"> </el-table-column>
                <el-table-column prop="idType" label="身份证件或身份证明文件类型" min-width="240" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="idCode" label="身份证件或身份证明文件号码" min-width="240" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="type" label="受益所有权关系类型" width="180px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="time" label="更新时间" width="160px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="prop" label="操作" width="120px">
                  <template slot-scope="{ row }">
                    <el-button type="text" icon="el-icon-view" @click="viewItem(row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div class="text-right mar-top-12">
      <el-button size="small" @click="goDiffPage('upload')" :disabled="diffDisabled || ispass">编辑差异报告</el-button>
      <el-button size="small" type="primary" :disabled="ispass" @click="dialogbox = true">查询备案主体信息</el-button>
      <el-button size="small" type="primary" :disabled="ispass" @click="inspectDialog = true">尽职核查</el-button>
      <el-button size="small" type="primary" :disabled="ispass" @click="goDiffPage('detail')">差异报告</el-button>
      <el-button size="small" @click="goBack">返 回</el-button>
    </div>
    <!-- 查询备案主体信息 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogbox"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="() => (dialogbox = false)"
    >
      <div>
        <el-checkbox v-model="checked">为履行反洗钱和反恐怖主义融资义务，需查询受益所有人信息</el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="() => (dialogbox = false)">取 消</el-button>
        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 尽职核查 -->
    <el-dialog
      title="尽职调查流程"
      :visible.sync="inspectDialog"
      width="45%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="() => (inspectDialog = false)"
    >
      <div style="display: flex; justify-content: center; align-items: center">
        <el-timeline :reverse="true">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :hide-timestamp="true"
            :timestamp="activity.timestamp"
            :type="activity.type"
            placement="top"
          >
            <div :style="{ color: activity.type ? '#409eff' : '#ccc' }">
              <div class="time">{{ activity.timestamp }}</div>
              <div>{{ activity.dept }}</div>
              <div class="mar-top-12">{{ activity.content }}</div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="launch">发起流程</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'InfoVerificationDetail',

  data() {
    return {
      ispass: true,
      tableDatas: [
        {
          view: false,
          name: '张三',
          nationality: '中国',
          idType: '******',
          idCode: '******',
        },
      ],
      curTableDatas: [],
      historyDatas: [
        {
          name: '张*',
          nationality: '中国香港',
          type: '实控',
          idType: '********',
          idCode: '********',
          time: '2025-08-08 15:35:33',
        },
      ],
      dialogbox: false,
      checked: false,
      verifyInfo: {},
      showFlag: false,
      inspectDialog: false, //核查弹框
      activities: [
        {
          dept: '',
          content: '测试1 发起流程',
          timestamp: '2025-06-06 15:35:35',
          type: 'primary',
        },
        {
          dept: 'xx部门',
          content: '等待【张倩倩】尽职核查',
          timestamp: '',
          type: '',
        },
        {
          dept: 'xx部门',
          content: '等待【刘艺】审核',
          timestamp: '',
          type: '',
        },
        {
          dept: 'xx部门',
          content: '等待【测试2】提交差异报告',
          timestamp: '',
          type: '',
        },
      ],
      diffDisabled: false,
    }
  },
  created() {
    this.verifyInfo = {
      serialID: 'CHECK2025050500000018',
      companyCode: '914301003388567',
      bodyName: '世瑞科技股份有限公司',
      bodyType: '-',
      result: '核验不一致',
      status: '是',
      orgName: '测试机构',
      optUser: '义务机构',
      time: '2025-05-05 10:30:30',
    }
    this.ispass = this.$route.query?.flag == 1
    if (this.ispass) {
      this.curTableDatas = [
        {
          name: '张*',
          nationality: '中国',
          type: '实控',
          idType: '********',
          idCode: '********',
          time: '2025-08-08 15:35:33',
        },
      ]
    } else {
      this.curTableDatas = [
        {
          name: '李*',
          nationality: '中国',
          type: '实控',
          idType: '********',
          idCode: '********',
          time: '2025-08-08 15:35:33',
        },
        {
          name: '王*',
          nationality: '中国',
          type: '实控',
          idType: '********',
          idCode: '********',
          time: '2025-08-08 15:35:33',
        },
        {
          name: '赵*',
          nationality: '中国',
          type: '实控',
          idType: '********',
          idCode: '********',
          time: '2025-08-08 15:35:33',
        },
      ]
    }
    if (sessionStorage.getItem('visit')) {
      this.checked = sessionStorage.getItem('bodyFlag') == '1'
      if (sessionStorage.getItem('bodyFlag')) {
        this.confirm()
      }
    }
  },
  mounted() {},

  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (!this.ispass && !row.name.includes('李')) {
        return 'warning-row'
      }
      if (row.name.includes('李')) {
        return 'normal-row'
      }
    },
    exportInfo() {},
    goBack() {
      this.$router.go(-1)
    },
    viewText(row, type) {
      row.view = !row.view
      if (type == '1') {
        if (row.view) {
          row.idType = '身份证'
          row.idCode = '310226199203024512'
        } else {
          row.idType = '******'
          row.idCode = '******'
        }
      }
      if (type == '2') {
        if (row.view) {
          if (row.name.includes('王')) {
            row.name = '王五'
          } else if (row.name.includes('赵')) {
            row.name = '赵六'
          } else if (row.name.includes('李')) {
            row.name = '李四'
          } else {
            row.name = '张三'
          }
          row.idType = '身份证'
          row.idCode = '310226199203024512'
        } else {
          if (row.name.includes('王')) {
            row.name = '王*'
          } else if (row.name.includes('赵')) {
            row.name = '赵*'
          } else if (row.name.includes('李')) {
            row.name = '李*'
          } else {
            row.name = '张*'
          }
          row.idType = '******'
          row.idCode = '******'
        }
      }
      if (type == '3') {
        if (row.view) {
          row.idType = '身份证'
          row.idCode = '310226199203024512'
        } else {
          row.idType = '******'
          row.idCode = '******'
        }
      }
    },
    viewItem(row) {
      sessionStorage.setItem('bodyFlag', this.checked ? '1' : '0')
      sessionStorage.setItem('visit', '1')
      this.$router.push({
        path: '/infoVerification/backupsDeatil',
        query: {
          checked: this.checked ? '1' : '0',
        },
      })
    },
    confirm() {
      this.showFlag = true
      this.dialogbox = false
    },
    goDiffPage(val) {
      sessionStorage.setItem('bodyFlag', this.checked ? '1' : '0')
      sessionStorage.setItem('visit', '1')
      this.$router.push(`/diffreport/${val}`)
    },
    launch() {
      this.inspectDialog = false
      this.diffDisabled = true
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  color: #666;
  .item {
    width: 25%;
    p {
      margin-bottom: 6px;
    }
  }
}
::v-deep .el-table .warning-row {
  color: #f56c6c;
}
::v-deep .el-table .normal-row {
  color: #606266;
}
::v-deep .el-timeline-item .time {
  position: absolute;
  left: -145px;
  top: auto;
}
</style>